<template>
	<Title rightText="注册"></Title>
	<div class="accountLogin">
		<div class="loginHead">
			<h3 v-if="mainOrSub">{{ mainTitle }}</h3>
			<h3 v-else>{{ subTitle }}</h3>
			<p class="routerClass" @click="changeTitle">
				<span v-if="mainOrSub">{{ subTitle }}</span>
				<span v-else>{{ mainTitle }}</span>
				<van-icon name="arrow" />
			</p>
		</div>
		<van-form class="vanForm" @submit="onSubmit">
			<van-cell-group inset>
				<van-field
					v-model="form.phone"
					name="手机号"
					placeholder="请输入手机号"
					:rules="[{ required: true, message: '请输入手机号' }]" />
				<van-field
					v-if="mainOrSub"
					v-model="form.password"
					:type="showornot"
					name="密码"
					placeholder="请输入密码"
					:rules="[{ required: true, message: '请输入密码' }]">
					<template #button>
						<span @click="isShow">
							<van-icon name="closed-eye" v-if="showeye" />
							<van-icon name="eye-o" v-else />
						</span>
					</template>
				</van-field>
				<van-field
					v-else
					v-model="form.code"
					name="验证码"
					placeholder="请输入验证码"
					:rules="[{ required: true, message: '请输入验证码' }]">
					<template #button>
						<span class="codeText" v-if="showCode" @click="getSeconds">发送验证码</span>
						<span class="codeText" v-else>
							<span>{{ totalSeconds }}</span>
							s后再次发送
						</span>
					</template>
				</van-field>
				<van-field
					name="radio"
					:rules="[{ required: true, message: '您还未同意用户协议及隐私条款' }]">
					<template #input>
						<van-radio-group v-model="form.checked" direction="horizontal" @change="changeRadio">
							<van-radio :name="true" @click="clickRadio">
								我已同意
								<span class="info">用户协议</span>
								及
								<span class="info">隐私条款</span>
							</van-radio>
						</van-radio-group>
					</template>
				</van-field>
			</van-cell-group>
			<van-button round block type="primary" native-type="submit">登录</van-button>
		</van-form>
		<p class="forgetPwd">忘记密码?</p>
		<div class="login-other">
			<van-divider>第三方登录</van-divider>
			<svg-icon class="icon" icon-class="qq"></svg-icon>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { FieldType } from 'vant'
import { useRouter } from 'vue-router'
import { request } from '@/utils/request'
import { useUserStore } from '@/stores/modules/user'
import Title from '@/components/commonTitle/index.vue'
import { Toast } from 'vant'
import 'vant/es/toast/style'

// 定义表单
interface Form {
	phone: string
	password: string
	code: string
	checked: string
}
const form = ref<Form>({
	phone: '13211112222',
	password: 'abc12345',
	code: '',
	checked: ''
})

// 顶部登录方式切换
const mainOrSub = ref<boolean>(true)
const mainTitle = ref<string>('账号密码登录')
const subTitle = ref<string>('短信验证码登录')
const changeTitle = () => {
	mainOrSub.value = !mainOrSub.value
}

//点击切换密码显示隐藏
const showornot = ref<FieldType>('password')
const showeye = ref<boolean>(true)
const isShow = () => {
	showeye.value = !showeye.value
	if (showeye.value === true) {
		showornot.value = 'password'
	} else {
		showornot.value = 'text'
	}
}

// 点击获取验证码
const showCode = ref<boolean>(true)
const totalSeconds = ref<number>(60)
const getSeconds = async () => {
	const countdownTimer = setInterval(() => {
		totalSeconds.value--
		showCode.value = false
		if (totalSeconds.value === 0) {
			clearInterval(countdownTimer)
			showCode.value = true
		}
	}, 1000)
	const res: { code: number; data: { code: string }; message: any } = await request(
		'/code',
		'get',
		{
			mobile: form.value.phone,
			type: 'login'
		}
	)
	if (res.code === 10000) {
		setTimeout(() => {
			form.value.code = res.data.code
		}, 5000)
	} else {
		Toast.fail(res.message)
	}
}

// 点击切换用户协议状态
const checked = ref<boolean>(false)
const changeRadio = () => {
	checked.value = true
}
const clickRadio = () => {
	if (!checked.value) {
		checked.value = true
	} else {
		form.value.checked = ''
		checked.value = false
	}
}

// 点击登录
const router = useRouter()
const store = useUserStore()
const onSubmit = async () => {
	if (mainOrSub.value === true) {
		const res = await request('/login/password', 'POST', {
			mobile: form.value.phone,
			password: form.value.password
		})
		if (res.code === 10000) {
			store.setUser(res.data)
			router.push('/')
		} else {
			Toast.fail(res.message)
		}
	} else if (mainOrSub.value === false) {
		const res = await request('/login', 'POST', {
			mobile: form.value.phone,
			code: form.value.code
		})
		if (res.code === 10000) {
			store.setUser(res.data)
			router.push('/')
		} else {
			Toast.fail(res.message)
		}
	}
}
</script>

<style scoped lang="scss">
.accountLogin {
	padding: 0 15px;
	box-sizing: border-box;

	.loginHead {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		padding: 25px 15px 50px;
		font-size: 14px;

		h3 {
			font-weight: 400;
			font-size: 24px;
			padding: 0;
			margin: 0;
		}

		.routerClass {
			margin: 0;
			color: var(--cp-text2);
		}
	}

	.codeText {
		color: var(--cp-primary);
	}

	.forgetPwd {
		color: var(--cp-text2);
		padding: 0 15px;
		font-size: 12px;
	}

	.login-other {
		margin-top: 30px;
		padding: 0 30px;
		text-align: center;

		.icon {
			font-size: 35px;
		}
	}
}

.van-field {
	padding: 16px 0;
}

.van-radio__label {
	.info {
		color: var(--cp-primary) !important;
		padding: 0 5px;
	}
}

:deep(.van-radio__icon--checked .van-icon) {
	width: 16px;
	height: 16px;
	line-height: 16px;
	font-size: 10px;
	background-color: var(--cp-primary) !important;
	border-color: var(--cp-primary) !important;
}

:deep(.van-radio__icon .van-icon) {
	width: 16px;
	height: 16px;
	line-height: 16px;
	font-size: 10px;
}

.van-button--primary {
	margin: 0 20px 16px;
	width: calc(100% - 40px);
	background-color: var(--cp-primary) !important;
	border-color: var(--cp-primary) !important;
}
</style>
